<!doctype html>
<html lang="zh">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
    <link rel="icon" href="../dist/img/favicon-32x32.png" sizes="32x32" type="image/png">
    <link rel="icon" href="../dist/img/favicon-16x16.png" sizes="16x16" type="image/png">
    <meta name="keywords" content="响应式后台模板,开源免费后台模板,Bootstrap5后台管理系统模板">
    <meta name="description" content="Bootstrap-Admin基于bootstrap5的免费开源的响应式后台管理模板">
    <meta name="author" content="ajiho">
    <link rel="stylesheet" href="../plugins/bootstrap-icons/font/bootstrap-icons.css">
    <link rel="stylesheet" href="../plugins/bootstrap/dist/css/bootstrap.min.css">
    <link rel="stylesheet" href="../dist/css/bootstrap-admin.min.css">

    <!--  dropzone插件必须的css  -->
    <link rel="stylesheet" href="../plugins/dropzone/dist/dropzone.css">
    <!--  dropzone插件基于boostrap-admin的css美化  -->
    <link rel="stylesheet" href="../plugins/dropzone/dist/bsa-dropzone.css">
    <title>Bootstrap-Admin - 开源免费响应式后台管理系统模板</title>
</head>
<body class="bg-light pt-2">
<div class="container-fluid">
    <div class="card border-0 shadow-sm">
        <div class="card-body">
            <form>
                <div class="mb-3">
                    <label for="title" class="form-label">文章标题</label>
                    <input type="email" class="form-control" id="title" name="title">
                </div>

                <div class="mb-3">
                    <label for="pic" class="form-label">文章封面</label>
                    <div class="dropzone" id="pic-wrapper"></div>
                    <input type="text" class="form-control position-fixed top-100" id="pic" name="pic">
                </div>
                <button type="submit" class="btn btn-primary">提交文章</button>
            </form>
        </div>
    </div>
</div>

<script src="../plugins/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
<script src="../dist/js/bootstrap-admin.min.js"></script>

<script src="../plugins/dropzone/dist/dropzone-min.js"></script>
<script>
    let picWrapper = new Dropzone("#pic-wrapper", {
        url: "/article/upfile.php",
        headers: {
            //这里一般的mvc框架都有这个防止csrf攻击的方法用来生成token
            'X-CSRF-TOKEN': 'xxxxxx'
        },
        paramName: "file", // 上传字段名称 默认为file
        maxFiles: 1,// 一次性上传的文件数量上限
        maxFilesize: 5, // 文件大小，单位：MB
        acceptedFiles: ".jpg,.gif,.png,.jpeg", // 上传的类型
        addRemoveLinks: true,
        parallelUploads: 1,// 一次上传的文件数量
        dictDefaultMessage: '拖动文件至此或者点击上传',
        dictMaxFilesExceeded: "最多只能上传3张封面",
        dictResponseError: '文件上传失败!',
        dictInvalidFileType: "文件类型只能是*.jpg,*.gif,*.png,*.jpeg",
        dictFallbackMessage: "浏览器不受支持",
        dictFileTooBig: "最大只能上传2M大小的封面.",
        dictRemoveLinks: "删除",
        dictRemoveFile: "删除",
        dictCancelUpload: "取消",
        init: function () {

            //这一段代码解决最大上传文件数量(不用管)
            this.on("addedfile", function (file) {
                if (this.files.length > this.options.maxFiles) {
                    this.removeFile(file);
                }
            });

            this.on("success", function (file, response) {
                if (response.code === 200) {
                    // 解决表单提交时，图片以#隔开解决
                    let arr = $('#fang_cover').val().split(',').filter(item => item);
                    arr.push(response.data);
                    let str = arr.join(',');

                    //同时把该值存到file对象上,等会儿删除的时候要通过它清空隐藏域的id值
                    file.id = response.data;

                } else {

                    //文件上传失败
                    $(file.previewTemplate).removeClass('dz-processing dz-image-preview dz-success').addClass('dz-error');
                    $(file.previewTemplate).find('.dz-error-message span').text(response.msg);//response.msg是后台返回的上传错误信息
                }
            });

            //文件上传同时也要清空input隐藏域的id值
            this.on("removedfile", function (file) {
                if (file.id !== undefined) {
                    let arr = $('#fang_cover').val().split(',');
                    arr.splice(arr.indexOf(file.id), 1);
                    let str = arr.join(',');
                }
            });
        }
    });

</script>
</body>
</html>